<template>
	<view class="order-item">
		<view class="order-title">
			<view class="shop-name"> {{ orderInfo.supply_order_no }} </view>
			<view class="status"> {{ status }} </view>
		</view>
		<view class="order-goods">
			<view class="goods">
				<!-- <image src="/static/logo.png" class="goods-img"/> -->
				<view class="goods-info">
					<view class="goods-name"> {{ orderInfo.count_goods_name }} </view>
					<!-- <view class="goods-spec"> 商品规格商品规格商品规格商品规格商品规格 </view> -->
					<view class="goods-pride-num">
						<!-- <view class="price"> 金额 </view> -->
						<view class="num"> x{{ orderInfo.total_quantity_sku }} </view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-footer">
			<!-- <view class="total-num">
				<view class="num-item">
					<view class="label"> 物流费用 </view>
					<view class="value"> 12345 </view>
				</view>
				<view class="num-item">
					<view class="label"> 物流费用 </view>
					<view class="value"> 12345 </view>
				</view>
			</view> -->
			<view class="btn-box" v-if="userInfo.role_id == '13'">
				<view class="btn" @tap="goDe"> 订单详情 </view>
				<template v-if="orderInfo.status == 1">
					<view class="btn" @tap="confirmOrder(2, '驳回')"> 驳回订单 </view>
					<view class="btn a-btn" @tap="confirmOrder(1, '接收')"> 接收订单 </view>
				</template>
				<template v-if="orderInfo.status == 2 || orderInfo.status == 4">
					<view class="btn" @tap="shipped('part')"> 分批发货 </view>
					<view class="btn a-btn" @tap="shipped('all')" v-if="orderInfo.status == 2"> 全部发货 </view>
				</template>
			</view>
			<view class="btn-box" v-else>
				<!-- <view class="btn" @tap="goDe"> 订单详情 </view> -->
				<view class="btn a-btn" @tap="receive" v-if="orderInfo.status == 0"> 接收 </view>
				<template v-if="orderInfo.status == 1 || orderInfo.status == 3">
					<view class="btn" @tap="allocation"  v-if="orderInfo.status == 1"> 分配员工 </view>
					<view class="btn a-btn" @tap="orderToWarehouse()"> 入库 </view>
				</template>
				<view class="btn a-btn" @tap="acceptance" v-if="orderInfo.status == 2"> 验收 </view>
				<!-- <template v-if="orderInfo.status == 2 || orderInfo.status == 4">
					<view class="btn" @tap="shipped('part')"> 分批发货 </view>
					<view class="btn a-btn" @tap="shipped('all')" v-if="orderInfo.status == 2"> 全部发货 </view>
				</template> -->
			</view>
		</view>
		<wd-message-box />
		<PickArea ref="pickAreaRef" @toWarehoused="emit('editSuccess')"/>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { confirmOrderApi, acceptanceApi } from '@/api'
	import { useUserStore } from '@/store'
	import { useMessage } from '@/uni_modules/wot-design-uni'
	import PickArea from './PickArea.vue'
	const props = defineProps(['orderInfo', 'pageType'])
	const emit = defineEmits(['editSuccess'])
	const message = useMessage()
	const userInfo = computed(() => useUserStore().userInfo)
	const pickAreaRef = ref()
	const status = computed(() => {
		const { status } = props.orderInfo
		const { role_id } = userInfo.value
		if(status == 0) return '待接收'
		else if(status == 1) return role_id=='13'?'待确认':'待分配'
		else if(status == 2) return role_id=='13'?'已确认':'待验收'
		else if(status == 3) return role_id=='13'?'已全部发货':'验收完成'
		else if(status == 4) return role_id=='13'?'已分批发货':'已入库'
		else if(status == 5) return role_id=='13'?'已拒绝':'直接入库'
		else return '已完成'
	})
	const goDe = () => {
		uni.navigateTo({
			url: '/pages/order/details?order_no='+props.orderInfo.supply_order_no
		})
	}
	// 接收、拒绝订单
	const confirmOrder = (status, txt) => {
		message.confirm({title:'提示', msg: `是否${txt}该订单？`}).then(res => {
			const params = {
				status,
				uid: userInfo.value.uid, 
				no: props.orderInfo.supply_order_no,
			}
			confirmOrderApi(params).then(res => {
				uni.showToast({
					icon: 'none',
					title: '已' + txt
				})
				emit('editSuccess')
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err.message
				})
			})
		})
	}
	// 分配员工
	const allocation = () => {
		uni.navigateTo({
			url: `/pages/order/allocation?no=${props.orderInfo.supply_order_no}&id=${userInfo.value.uid}&type=${props.pageType}`
		})
	}
	// 接收订单
	const receive = (no) => {
		uni.navigateTo({
			url: '/pages/order/receive?no=' + props.orderInfo.supply_order_no
		})
	}
	const acceptance = () =>{
		uni.navigateTo({
			url: `/pages/order/acceptance?no=${props.orderInfo.supply_order_no}&id=${userInfo.value.uid}&type=${props.pageType}`
		})
		// acceptanceApi({no: props.orderInfo.supply_order_no}, 'GET').then(res => {
		// 	console.log(res);
		// })
	}
	// 订单入库
	const orderToWarehouse = () => {
		pickAreaRef.value.open({
			uid: userInfo.value.uid,
			no: props.orderInfo.supply_order_no
		})
	}
	const toWarehoused = () => {
		props.orderInfo.status = 4
	}
	// 去发货
	const shipped = (type) => {
		uni.navigateTo({
			url: `/pages/order/shipped?type=${type}&order_no=${props.orderInfo.supply_order_no}`
		})
	}
</script>

<style lang="scss" scoped>
	.order-item {
		width: 100%;
		padding: 24rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.order-title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f8f8f8;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			.shop-name {
				color: #999;
			}
			.status {
				color: #f57351;
			}
		}
		.order-goods {
			.goods {
				display: flex;
				align-items: center;
				gap: 20rpx;
				.goods-img {
					width: 160rpx;
					height: 160rpx;
				}
				.goods-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 5px;
					.goods-name, .goods-spec {
						width: calc(750rpx - 276rpx);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.goods-name {
						font-weight: bold;
					}
					.goods-spec {
						color: #999;
					}
					.goods-pride-num {
						display: flex;
						justify-content: end;
						// margin-top: 10px;
						.price {
							color: var(--parimy-color);
							position: relative;
							padding-left: 20rpx;
							&::before {
								display: block;
								content: var(--fh);
								font-size: 20rpx;
								position: absolute;
								left: 0;
								bottom: 0;
							}
						}
						.num {
							color: #999;
						}
					}
				}
			}
		}
		.order-footer {
			color: #999;
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1px solid #f8f8f8;
			.num-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.value {
					color: #333;
					position: relative;
					padding-left: 20rpx;
					&::before {
						display: block;
						content: var(--fh);
						font-size: 20rpx;
						position: absolute;
						left: 0;
						bottom: 0;
					}
				}
			}
			.btn-box {
				display: flex;
				justify-content: end;
				gap: 20rpx;
				.btn {
					color: #333;
					line-height: 14px;
					padding: 12rpx 24rpx;
					border-radius: 40rpx;
					border: 1px solid #eee;
					white-space: nowrap;
				}
				.a-btn {
					color: #fff;
					border: none;
					background-color: #f57351;
				}
			}
		}
	}
</style>